<template>
  <div class="room width_100" chat-infobox="444">
    <room-header></room-header>
    <div class="content width_100 height_100"  @click.stop="showUserInfo">
      <video-box></video-box>
      <member-side></member-side>
    </div>
    <room-footer @click.stop.native="showUserInfo"></room-footer>
    <message-box></message-box>
    <fullScreen v-if="fullScreen_id"></fullScreen>
    <relieve></relieve>
    <user-info-box ref="userInfoBoxDialog"></user-info-box>
  </div>
</template>

<script>
import roomHeader from './components/roomHeader'
import roomFooter from './components/roomFooter'
import videoBox from './components/videoBox'
import memberSide from './components/memberSide'
import messageBox from './components/messageBox'
import fullScreen from './components/fullScreen'
import relieve from './components/roomDialog/relieve'
import userInfoBox from '@/views/Home/components/userInfoDialog'

export default {
  data () {
    return {
    }
  },
  computed: {
    // 全屏的用户ID
    fullScreen_id () {
      return this.$store.state.conferenceRoom.cf_fullScreen_id
    }
  },
  methods: {
    showUserInfo (e) { // 展示信息框
      if (e.target.getAttribute('showuserinfo')) {
        const userId = e.target.getAttribute('showuserinfo').split('&')[1]
        let pageX = e.pageX
        let pageY = e.pageY
        const maxY = document.body.clientHeight
        const maxX = document.body.clientWidth - 20
        if (pageX + 3.6 * this.$_currentRem > maxX) {
          pageX = (pageX - 3.6 * this.$_currentRem) / this.$_currentRem
        } else {
          pageX = pageX / this.$_currentRem
        }
        if (pageY + 5.2 * this.$_currentRem > maxY) {
          pageY = (maxY - 5.4 * this.$_currentRem) / this.$_currentRem
        } else {
          pageY = pageY / this.$_currentRem
        }
        this.$refs.userInfoBoxDialog.setCurrentInfo(userId)
        this.$store.commit('common/set_userInfoType', 3)
        this.$store.commit('common/set_ifShowUserInfo', true)
        this.$refs.userInfoBoxDialog.setPosition(pageX, pageY)
      } else if (e.target.getAttribute('personalInfo')) {
        this.$store.commit('common/set_ifShowPersonalInfo', true)
      } else {
        let el = e.target
        let parentELName = ''
        do {
          if (el && el.getAttribute('chat-infobox')) {
            parentELName = el.getAttribute('chat-infobox')
          } else {
            el = el.parentElement
            parentELName = el ? el.getAttribute('chat-infobox') : ''
          }
        } while (el && !parentELName)
        switch (parentELName) {
          case '444':
            this.$store.commit('common/set_ifShowUserInfo', false)
            this.$store.commit('common/set_ifShowPersonalInfo', false)
            break

          default:
            break
        }
      }
    }
  },
  components: {
    roomHeader,
    roomFooter,
    videoBox,
    memberSide,
    messageBox,
    fullScreen,
    relieve,
    userInfoBox
  }
}
</script>

<style lang="scss" scoped>
.room {
  position: relative;
  height: 100%;
  background: #0D172C;

  .content {
    padding: 44px 0 72px;
    float: left;
  }
  ::v-deep .userInfo{
    z-index: 2021;
  }
}
</style>
